<template>
  <div class="hqda-table-component">
    <el-table
      border
      class="table"
      style="width:100%"
      :ref="customerField.ref"
      highlight-current-row
      :size="customerField.size"
      v-loading="customerField.loading"
      :empty-text="emptyText"
      :data="customerField.tableData"
      @selection-change="handleSelectionChange"
    >
      <slot name="left"></slot>
      <template  v-for="(item, index) in customerField.allField" >

        <el-table-column
         :key="index"
         v-if = "item.type==='text'"
        resizable
        :type="item.type"
        :label="item.label"
        :property="item.property"
        :width="item.width ? item.width : ''"
        :align="item.align ? item.aligin: 'center'"
        :sortable="item.sortable"
        :fixed="item.fixed"
        :formatter="item.formatter"
        :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          <router-link tag="li" :to="{name: item.url, params: {id: scope.row.id, row: scope.row}}" v-if="item.contentType==='post_params_hide'">
            <a class='linkActive'>{{scope.row[item.property]}}</a>
          </router-link>
          <router-link tag="li" :to="{path: item.url + scope.row.id }" v-else-if="item.contentType==='post_params_show'">
            <a class='linkActive'>{{scope.row[item.property]}}</a>
          </router-link>
          <span v-else>{{scope.row[item.property]}}</span>
        </template>
        </el-table-column>

        <!-- 操作按钮 -->
        <el-table-column
         :key="index"
         v-else-if = "item.type==='handle'"
        resizable
        :type="item.type"
        :label="item.label"
        :property="item.property"
        :width="item.width ? item.width : ''"
        :align="item.align ? item.aligin: 'center'"
        :sortable="item.sortable"
        :fixed="item.fixed"
        :formatter="item.formatter"
        :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          <router-link tag="li" :to="{path: item.url + scope.row.id }" v-if="item.contentType==='query'">
            <a class='linkActive'>查看</a>
          </router-link>
          
        </template>
        </el-table-column>

        <el-table-column
        v-else
        :key="index"
        resizable
        :type="item.type"
        :label="item.label"
        :property="item.property"
        :width="item.width ? item.width : ''"
        :align="item.align ? item.aligin: 'center'"
        :sortable="item.sortable"
        :fixed="item.fixed"
        :formatter="item.formatter"
        :show-overflow-tooltip="true"
        
        >
        </el-table-column>
      </template>
      
      <slot name="right"></slot>
      <div slot="empty">
        <!-- <div :style="{'marginTop': '15px'}">
          <img src="../../assets/images/noRecord.png" alt width="140" height="100">
        </div> -->
        <p :style="{'marginTop': '5px'}">暂无数据</p>
      </div>
    </el-table>
  </div>
</template>

<script>
import tableRender from "./table_render";
export default {
  props: {
    customerField: {
      default: {}
    }
  },
  
  data() {
    return {
      emptyText: "暂无数据",
      multipleSelection: []
    };
  },
  components: {
    tableRender
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("handleSelectionChange", val);
    },
    handleLoook(url,row) {
      this.$router.push({
        path: `${url}${row.id}`
      })
    }
  }
};
</script>
<style lang="scss">
  .hqda-table-component {
       // 隐藏表头下划线
    .el-table td, .el-table th.is-leaf {
      border-bottom: 0;
    }

    // 表格：列表选中时背景色
    .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td, .el-table__body tr.hover-row.current-row > td, .el-table__body tr.hover-row.el-table__row--striped.current-row > td, .el-table__body tr.hover-row.el-table__row--striped > td, .el-table__body tr.hover-row > td {
      background-color: $colorTableActive;
    }


    .el-table {
      color: $tableBodySize;
      thead {
        color: $tableHeaderSize ;
      }
      th {
        padding: 0;
        height: 40px;
        background-color: $colorTableHeader;
        &:not(:last-child) {
          border-right: 1px solid white;
        }
      }
      .el-button {
        margin-left: 0;
      }

      .cell {
        line-height: 18px;
        font-weight: normal;
      }
      td {
        height: 48px;
        line-height: 48px;
        border-bottom-color: #E6E6E6;
      }

      // 操作按钮样式
      .el-button {
        padding: 5px;
        border: 0;
        background-color: transparent;
      }
    }

  }
</style>
